<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=var, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 第一题：
      // var fullName = 'language'
      // var obj = {
      // fullName: 'javascript',
      // prop: {
      //   getFullName: function () {
      //     return this.fullName
      //   }
      // }
      // }
      // console.log(obj.prop.getFullName())  //undefined,this指向prop.fullName,prop里面没有fullName这个，所有就返回：undefined。
      // var test = obj.prop.getFullName
      // console.log(test())  // language，test指向是window全局的 fullName的 language

      // No.2
      // var val = 1
      // var json = {
      //   val: 10,
      //   dbl: function () {
      //     val *= 2
      //   }
      // }
      // json.dbl()
      // console.log(json.val + val)
      // json.dbl() 调用 现在就是 json.dbl 找到的val 是window的 1，
      //  因为对象用点语法才能找到它的键值。1*= 2 ， 现在全局的val  =等于2
      // (json.val + val)  json.val 等于 10，10加上+val 2 等于 = 12。

      // No.3
      // var val = 1
      // var json = {
      //   val: 10,
      //   dbl: function () {
      //     this.val *= 2
      //   }
      // }
      // json.dbl()
      // console.log(json.val + val)
      // 21,  json.dbl()是调者，  json.dbl() 就是10*=2 等于20，
      // json.val + val 相对于 20 + 全局的val 的 1 =  就等于 21；

      // // No.4
      var num = 10; //第一次覆盖成60了，第二次就是65了
      var obj = {
        num: 20, //第三遍 30
        // fn只是一个对象里面的键名     //20
        fn: (function (num) {
          //   这个this是window.num      // num 10      num *3;相当于  20 *3 =// 60
          this.num = num * 3;
          //   这里这个形参num20 +1  = 21
          num++; //第一遍 21

          return function (n) {
            // fn实参是5
            //第一遍 window.num += 60 + n 5 = 65
            // 第二遍 obj.num 20 += 10,等于 30，这里的n是重新赋值的10，最后赋值给obj.num
            this.num += n;
            // 第一遍 num 21 ++ 等于 22
            //第二遍 num 22 ++ 等于 23
            num++;
            console.log(num); // 第二遍s输出22  ，第二遍输出 23
          };
        })(obj.num), // 立即执行函数 实参20
      };

      //    obj.fn 赋值给 新 var fn = 21行的function
      var fn = obj.fn;
      // fn调用 ，实参传入5 到function的n
      fn(5);
      obj.fn(10);
      console.log(num, obj.num); //65,30


      // // No.5
      // var name = "window";
      // var person1 = {
      //   name: "person1",
      //   show1: function () {
      //     console.log(this.name);
      //   },
      //   show2: () => console.log(this.name),
      //   show3: function () {
      //     // console.log(this);
      //     return function () {
      //       console.log(this.name);
      //     };
      //   },
      //   show4: function () {
      //     // this=》person2
      //     console.log(this);
      //     return () => console.log(this.name);
      //   },
      // };

      // var person2 = {
      //   name: "person2",
      // };

      person1.show1(); //"person1"
      //person1.show1() 调用，person1里面的点show1，this.name，
      // 这里的this 就是指 person1.name 结果就是：person1

      person1.show1.call(person2); // person2.name

      person1.show2(); // window ，
      // person1.show2是箭头函数，所有没有this指向，也没有被函数定义，就是被window执行了

      person1.show2.call(person2); //window

      person1.show3()(); //window
      // ,第一个括号是() show3: function () {},
      // 然后 return回了一个函数，function () {} console.log(this.name);
      // 这时这里的第二个括号就相当于person1.show3()()，要执行function () {} 这个函数，function前面没有东西就已经由windowd调用

      person1.show3().call(person2); //person2
      person1.show3.call(person2)(); //window,
      // 第一个括号是()call指向虽然改变了person2但是没有输出，
      // 然后 return回了一个函数，function () {} console.log(this.name);
      // 这时这里的第二个括号就相当于person1.show3()()，要执行function () {} 这个函数，function前面没有东西就已经由windowd调用

      person1.show4()(); //person1,
      // return () => console.log(this.name);箭头函数是在 show4这个函数里面，是 person1 调用show4的函数，所以最后指向是
      // 所以this.name指向是 person1.name: "person1"

      person1.show4().call(person2); // person1.show4().call(person2) 这个函数先执行return出箭头函数，
      // call方法在箭头函数的指向方法不可用，就找到上一层函数的作用域调用
      //箭头函数在 show4这个函数里面，是 person1 调用show4的函数，所以最后指向是
      // 所以this.name指向是 person1.name: "person1"

      person1.show4.call(person2)(); //person2
      // person1.show4.call(person2)()改掉函数指向到person2，
      // 在return () => console.log(this.name);这个箭头函数方法call不可用，往上一层看函数作用域是function，funtion是person2，
      // 所以this.name指向的是person2.name: person2。
    </script>
  </body>
</html>
